<template>
  <div class="page-form-for-designer">
    <Form :label-width="105">
      <FormItem label="ID">
        <Input size="small" v-model="id" disabled/>
      </FormItem>

      <FormItem label="页面名称">
        <Input size="small" v-model="name"/>
      </FormItem>
      <FormItem label="页面路径">
        <Input size="small" v-model="path" disabled/>
      </FormItem>
      <FormItem label="备注">
        <Input size="small" type="textarea" v-model="remark"/>
      </FormItem>
      <FormItem label="最后更新日期">
        <Input size="small" v-model="create_date" disabled/>
      </FormItem>
      <!--<FormItem label="关联组件">
        <Input size="small" v-model="component" disabled/>
      </FormItem>-->
      <FormItemPanel title="页面缩略图">
        <Tooltip content="系统只会截取页面最后一次保存的状态，所以截取前请确保页面已保存，截图完成之后也请记得保存页面"
                 placement="top"
                 :max-width="180"
                 style="width: 100%;">
          <Button type="primary" @click="screenShot" style="margin-bottom: 10px;" long :loading="screenShotLoading">
            系统自动截取
          </Button>
        </Tooltip>
        <div class="thumbnail-card">
          <Icon type="ios-image" v-if="!thumbnail"/>
          <img v-if="thumbnail" :src="$PnUtil.buildImageSrc(thumbnail)"/>
        </div>
        <UploadImageButton v-model="thumbnail" :page-id="$PnUtil.getUrlParam('page_id')"></UploadImageButton>
        <FormItem label="相对路径">
          <i-input size="small" v-model="thumbnail" readonly>
            <Button slot="append" icon="md-close" @click="thumbnail = ''"></Button>
          </i-input>
        </FormItem>
      </FormItemPanel>
      <!--<FormItem label="操作">
        <Button size="small" type="primary" @click="heavyLoadPage" style="margin-right: 5px;">重载页面</Button>
      </FormItem>-->
    </Form>

  </div>
</template>

<script>
import html2canvas from 'html2canvas'

// 解决百度地图无法被截图的问题
HTMLCanvasElement.prototype.getContext = function (origFn) {
  return function (type, attributes) {
    if (type === 'webgl') {
      attributes = Object.assign({}, attributes, {
        preserveDrawingBuffer: true,
      });
    }
    return origFn.call(this, type, attributes);
  };
}(HTMLCanvasElement.prototype.getContext);

import {createHelpers} from 'vuex-map-fields'

const {mapFields} = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});

export default {
  name: 'PageFormForDesigner',
  data() {
    return {
      echartThemes: [],
      screenShotLoading: false
    }
  },
  mounted() {
    this.$PnApi.EchartThemeApi.getAllEchartTheme().then(result => {
      result.data.payload.forEach(item => {
        this.echartThemes.push({
          is_sys: item.is_sys,
          label: item.name,
          value: item.id,
          colors: JSON.parse(item.json_text).color
        })
      })
    })
  },
  methods: {

    /**
     * 重载页面
     */
    heavyLoadPage() {
      this.$store.commit('designer/resetDesigner');
      this.$store.dispatch('designer/loadPage', this.id);
    },

    screenShot() {
      this.screenShotLoading = true

      let domId = ''
      if (this.develop_canvas == 'AbsoluteLayoutCanvas') {
        domId = 'AbsoluteLayout'
      }else if (this.develop_canvas == 'ReactiveLayoutCanvas') {
        domId = 'ReactiveLayout'
      }

      this.$PnUtil.systemScreenShot(domId, this.id, (result) => {
        if (result.data.success) {
          this.thumbnail = '';
          this.thumbnail = result.data.payload.relativePath;
          this.$Message.success('截取成功，请记得保存页面')
        }else {
          this.$Message.error('截取失败')
        }
        this.screenShotLoading = false
      }, (error) => {
        console.error(error);
        this.screenShotLoading = false
        this.$Message.error('截取失败')
      })

      // 下面的代码为使用后端进行浏览器截图，已暂停使用
      // this.$PnApi.FileUploadApi.screenShot(
      //     this.$PnUtil.getTimestamp(),
      //     this.id,
      //     'http://' + window.location.host + window.g.PROJECT_ROOT_NAME + this.path,
      //     this.layout.layoutConfigData.width,
      //     this.layout.layoutConfigData.height,
      //     this.develop_canvas).then(result => {
      //   if (result.data.success) {
      //     this.thumbnail = '';
      //     this.thumbnail = result.data.payload;
      //     this.$Spin.hide();
      //     this.$Message.success(result.data.message)
      //   } else {
      //     this.$Spin.hide();
      //     this.$Message.success(result.data.message)
      //   }
      // })
    }
  },
  computed: {
    ...mapFields({
      id: 'pageMetadata.id',
      name: 'pageMetadata.name',
      path: 'pageMetadata.path',
      remark: 'pageMetadata.remark',
      layout: 'pageMetadata.layout',
      create_date: 'pageMetadata.create_date',
      component: 'pageMetadata.component',
      develop_canvas: 'pageMetadata.develop_canvas',
      thumbnail: 'pageMetadata.thumbnail'
    })
  },
  watch: {
    develop_canvas: function (val) {
      if (val) {
        this.component = val.replace('Canvas', '');
      }
    }
  }
}
</script>

<style lang="less" scoped>

.thumbnail-card {
  width: 100%;
  height: 120px;
  background-color: #757575;
  padding: 5px;
  margin-bottom: 5px;
  position: relative;

  i {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 70px;
    color: #fff;
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.ivu-form-item {
  margin-bottom: 0px;
}
</style>
